<script setup>
import { RouterView } from 'vue-router'
import VScaleScreen from 'v-scale-screen'
import { computed, ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import panzoom from 'panzoom'
import { ElSwitch } from 'element-plus'
import Title1 from '@/assets/imgs/title_cl.png'
import Title2 from '@/assets/imgs/title_text.png'
import Title3 from '@/assets/imgs/title_Cz.png'
import Title4 from '@/assets/imgs/title_R2.png'
import Title5 from '@/assets/imgs/title_jrl.png'
import Title6 from '@/assets/imgs/title_jzcl.png'
import { setScaleState } from '@/utils/scale'

const route = useRoute()

const isPanzoomEnabled = ref(false)
const isAdaptiveEnabled = ref(true) // 新增：控制是否使用自适应
const panzoomInstance = ref(null)
const containerRef = ref(null)
const screenSize = ref({ width: 2560, height: 1080 })

const titleMap = {
  video1: Title1,
  video2: Title2,
  video3: Title3,
  video4: Title4,
  video5: Title5,
  video6: Title6,
}
const titleSrc = computed(() => titleMap[route.name] || null)
const isLarge = computed(() => route.name === 'video3' || route.name === 'video4')

// 计算缩放比例
const scaleRatio = computed(() => {
  if (isAdaptiveEnabled.value) return 1
  const windowWidth = window.innerWidth
  const windowHeight = window.innerHeight
  const scaleX = windowWidth / screenSize.value.width
  const scaleY = windowHeight / screenSize.value.height
  return Math.min(scaleX, scaleY) // 使用较小的比例保持宽高比
})

const togglePanzoom = async (value) => {
  isPanzoomEnabled.value = value

  if (isPanzoomEnabled.value) {
    await nextTick()
    initPanzoom()
  } else {
    destroyPanzoom()
  }
  // 更新全局缩放状态
  setScaleState(isAdaptiveEnabled.value, isAdaptiveEnabled.value ? 1 : scaleRatio.value)
}

const toggleAdaptive = (value) => {
  isAdaptiveEnabled.value = value
  if (!value) {
    // 关闭自适应时，默认启用拖拽缩放
    isPanzoomEnabled.value = true
    nextTick(() => initPanzoom())
  } else {
    // 开启自适应时销毁拖拽缩放
    destroyPanzoom()
    isPanzoomEnabled.value = false
  }
  // 更新全局缩放状态
  setScaleState(value, value ? 1 : scaleRatio.value)
}

const initPanzoom = () => {
  if (containerRef.value && !panzoomInstance.value) {
    panzoomInstance.value = panzoom(containerRef.value, {
      maxZoom: 5,
      minZoom: 0.5,
      initialZoom: 1,
      smoothScroll: false,
      zoomDoubleClickSpeed: 1,
      bounds: true,
      boundsPadding: 0.1,
    })
  }
}



const destroyPanzoom = () => {
  if (panzoomInstance.value) {
    panzoomInstance.value.dispose()
    panzoomInstance.value = null
  }
}

onMounted(() => {
  // 监听窗口大小变化
  const handleResize = () => {
    screenSize.value = {
      width: window.innerWidth,
      height: window.innerHeight,
    }
  }

  window.addEventListener('resize', handleResize)
  handleResize() // 初始化时获取屏幕尺寸

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
  })
})

onUnmounted(() => {
  destroyPanzoom()
})
</script>

<template>
  <div>
    <!-- 自适应容器 -->
    <v-scale-screen
      v-if="isAdaptiveEnabled"
      width="2560"
      height="1080"
      :wrapperStyle="{ margin: 0 }"
      class="bg "
    >
      <RouterView />
    </v-scale-screen>

    <!-- Panzoom 容器 -->
    <div
      v-else-if="isPanzoomEnabled"
      ref="containerRef"
      class="bg w-full h-screen  overflow-visible"
      style="cursor: grab"
    >
      <div class="w-[2560px] h-[1080px]">
        <RouterView />
      </div>
    </div>

    <!-- 非自适应容器 - 根据屏幕尺寸缩放 -->
    <div v-else class="bg w-full h-screen flex items-center justify-center">
      <div
        :style="{
          transform: `scale(${scaleRatio})`,
          transformOrigin: 'center center',
          width: '2560px',
          height: '1080px',
          '--scale-ratio': scaleRatio,
        }"
        class="scaled-container"
      >
        <RouterView />
      </div>
    </div>

    <!-- 标题图片 -->
    <img
      v-if="titleSrc"
      :src="titleSrc"
      :class="[{ 'scale-[1.6]': isLarge }, 'fixed top-10 w-[340px] left-1/2 -translate-x-1/2 z-40']"
    />

    <!-- 控制开关 -->
    <div class="fixed top-4 right-4 z-[9999999999999999999999] flex flex-col gap-3">
      <!-- 自适应开关 -->
      <div class="flex items-center gap-3">
        <span class="text-sm font-medium text-white">屏幕自适应</span>
        <el-switch
          v-model="isAdaptiveEnabled"
          @change="toggleAdaptive"
          active-text=""
          inactive-text=""
          :active-value="true"
          :inactive-value="false"
        />
      </div>

      <!-- 提示信息 -->
      <div v-if="isPanzoomEnabled" class="text-xs text-white bg-black bg-opacity-70 rounded p-2">
        滚轮缩放 | 拖拽平移
      </div>
      <div
        v-else-if="!isAdaptiveEnabled"
        class="text-xs text-white bg-black bg-opacity-70 rounded p-2"
      >
        当前缩放比例: {{ (scaleRatio * 100).toFixed(1) }}%
      </div>
    </div>
  </div>
</template>

<style scoped>
.bg {
  background-image: url(./assets/imgs/background.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 为子组件提供缩放比例变量 */
.scaled-container {
  --base-width: 2560;
  --base-height: 1080;
}

/* 当非自适应模式时，调整子组件的固定尺寸 */
.scaled-container :deep(.fixed-size-element) {
  transform: scale(var(--scale-ratio, 1));
  transform-origin: top left;
}
</style>
